<template>
  <div>
    <div class="page-cover" v-if="show&&fixHead" @click="showMenus">
    </div>
    <header :class="{'show': show&&fixHead, 'fix-head': fixHead, 'no-fix': !fixHead}" id="hd">
      <div class="nv-toolbar">
        <div class="toolbar-nav" @click="openMenu" v-if="fixHead">
        </div>
        <span v-text="pageType"></span>
      </div>
    </header>
    <sm-menu :show-menu="show" :page-type="pageType" v-if="fixHead"></sm-menu>
    <sm-location></sm-location>
  </div>
</template>
<script>
// Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。
import SMMenu from '@/components/menu'

import SMLocation from '@/components/location'
export default{
  name: 'header',
  replace: true,
  props: { // 父组件传过来的属性
    pageType: String,
    fixHead: Boolean
  },
  data(){
    return{
      show: false
    }
  },
  methods: {
    openMenu(){
      this.show = !this.show
    },
    showMenus(){
      this.show = !this.show
    }
  },
  components:{
    'smMenu': SMMenu,
    'smLocation': SMLocation
  }

}
</script>
<style>
   .amap-demo {
     height: 300px;
   }
 </style>
<style lang="scss">
    .info-tip {
        position: fixed;
        left: 0;
        top: 44px;
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: rgba(255, 129, 159, .8);
        color: #fff;
        font-size: 12px;
        z-index: 999;
    }
    .jokes-list {
        height: 100%;
        background: #dedede;
        >li {
            background-color: #fff;
            margin-bottom: 3px;
        }
    }
    .user-info {
        display: flex;
        align-items: center;
        padding: 10px;
        .hot-wrap{
            margin:0 auto;
            font-size:12px;
            width:20px;
            line-height:1.5;
            text-align:center;
            background: #ff819f;
            color:#fff;
            margin-right:1px;
            transform: scale(.6);
        }
        .user-avatar {
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
            border: 1px solid #f3f3f3;
        }
        .user-name {
            flex: 1;
            color: #787878;
        }
        .icon-close {
            color: #ff819f;
            border-radius: 5px;
            font-size: 30px;
            padding: 0 5px;
        }
    }
    .nh-content {
        font-size: 16px;
        color: #333;
        word-break: break-all;
        word-wrap: break-word;
        line-height: 1.5;
        &-wrapper {
            padding: 5px 10px;
        }
        .action-btn-list {
            display: flex;
            font-size: 14px;
            align-items: center;
            justify-content: center;
            height: 45px;
            .btn {
                flex: 1;
                text-align: center;
            }
            .btn span {
                display: inline-block;
                text-align: left;
                background-repeat: no-repeat;
                padding-left: 25px;
                background-size: auto 60%;
                line-height: 30px;
                box-sizing: border-box;
                white-space: nowrap;
            }
            .digg-item .up {
                background-image: url();
                background-position: left 5px;
            }
            .up_hot{
              background-image: url('http://s3.bytecdn.cn/neihan/resource/neihan_reflow/neihan_common/static/image/detail/digg_ed_0b1c5ec.png');
              background-position: left 5px;
            }
            .bury-item .down {
                background-image: url();
                background-position: left 8px;
            }
            .bury-item .down_hot {
                background-image: url('http://s3a.bytecdn.cn/neihan/resource/neihan_reflow/neihan_common/static/image/detail/bury_ed_a62b43d.png');
                background-position: left 8px;
            }
            .comment-item span {
                background-image: url();
                background-position: left 8px;
            }
            .share-item span {
                background-image: url();
                background-position: left 8px;
            }
        }
    }
    .nh-bar-link {
        display: inline-block;
        border-radius: 5px;
        .link-text {
            display: inline-block;
            min-width: 3rem;
            height: 1.3rem;
            padding: 0 .5rem;
            line-height: 1.3rem;
            border-radius: 10px;
            border: 1px solid #5e96b4;
            color: #5e96b4;
            text-align: center;
            font-size: 14px;
            span {
                color: #5e96b4;
                display: block;
            }
        }
    }
    .nh-divider {
        width: 100%;
        height: .5rem;
        background-color: #f9f7f7;
    }
    .dplayer-full-in-icon {
        display: none;
    }
    .nh-pic {
        width: 100%;
    }
    .thumb-list {
        display: flex;
        flex-flow: wrap;
        .thumb-item {
            width: 32%;
            margin-left: 1%;
            margin-bottom: 1%;
            box-sizing: border-box;
        }
    }
    .preview-wrapper {
        position: relative;
        overflow: hidden;
        .long-img-bg {
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background: url(//s3.pstatp.com/resource/neihan_wap/static/image/long-img-bg_b8c6002.png) repeat-x center center;
            background-size: auto 100%;
            span {
                display: inline-block;
                font-size: 14px;
                color: #fff;
                height: 50px;
                line-height: 50px;
                padding-left: 30px;
                background: url(//s3a.pstatp.com/resource/neihan_wap/static/image/long-img-icon_e84cd76.png) no-repeat left center;
                background-size: auto 40%;
            }
        }
    }
    .loadMore {
        text-align: center;
        font-size: 16px;
        color: #ff819f;
        margin: 10px auto;
        height: 20px;
        span {
            display: inline-block;
            width: 2px;
            height: 100%;
            border-radius: 2px;
            background: #ff819f;
            animation: load 1s ease infinite;
        }
    }
    @keyframes load {
        0%,
        100% {
            height: 5px;
            background: #ff819f;
        }
        50% {
            height: 20px;
            margin: -5px 0;
            background: lightgreen;
        }
    }
    .loadMore span:nth-child(2) {
        animation-delay: 0.2s;
    }
    .loadMore span:nth-child(3) {
        animation-delay: 0.4s;
    }
    .loadMore span:nth-child(4) {
        animation-delay: 0.6s;
    }
    .loadMore span:nth-child(5) {
        animation-delay: 0.8s;
    }
    .refresh-btn-wrapper {
        position: fixed;
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 10px;
        .refresh-btn {
            display: block;
            width: 100%;
            height: 100%;
            background: url(//s3a.pstatp.com/resource/neihan_wap/static/image/refreshicon_0e30755.png) no-repeat center center;
            background-size: 100%;
        }
        .refresh-btn.spinner {
            animation: rotator-anticlock .5s linear infinite;
        }
    }
    @keyframes rotator-anticlock {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-360deg);
        }
    }
</style>
